<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style type="text/css">
			.ball {
				margin: 100px auto;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				/* background-color: #FF6700; */
				background-image:radial-gradient(circle at center ,#fff ,#000) ;
				
			}
		 	body:hover .ball {
				animation-name: ball;
				animation-duration: 2s;
				animation-timing-function: ease-in;
				animation-iteration-count: 1;
			/* 	animation-direction: alternate; */
				animation-fill-mode: forwards;/*动画完毕后停到最后一帧*/
				/* transform: translateY(500px) */
			}
			.shadow {
				margin: 488px auto 0;
				width:200px;
				height: 30px;
				border-radius: 50%;
				background-color: #1C2234;
				filter: blur(20px);
				opacity: 0.5;
				animation-name: shadow;
				animation-duration: .8s;
				animation-timing-function: ease-in;
				animation-iteration-count: infinite;
				/* animation-direction: alternate; */
				
			}
			@keyframes ball{
				12.5%,37.5%,62.5%,85%,100%{
					transform: translateY(500px);
				}
				25% {
					transform: translateY(100px);
				}
				50%{
					transform: translateY(200px);
				}
				75%{
					transform: translateY(300px);
				}
				90%{
					transform: translateY(400px);
				}
			}
			/* @keyframes shadow{
				to{
					width:150px;
					filter: blur(10px);
					opacity: 0.8;
				}
			} */
			
		</style>
	</head>
	<body>
		<div class="ball"></div>
		<div class="shadow"></div>
	</body>
</html>
